<template>
  <div>
    <el-dialog :visible.sync="centerDialogVisible" center class="dialog" title="新增退票" width="35%">
            <span style="text-align:center;">
              <template>
                <div>
                  <el-input v-model="in_saleId" class="input3" placeholder="订单编号" style="width:150px"></el-input>&nbsp;
                  <el-input v-model="in_ticId" class="input3" placeholder="车票编号" style="width:150px"></el-input>&nbsp;
                  <el-input v-model="in_userId" class="input3" placeholder="购票用户" style="width:150px"></el-input><br>
                  <el-date-picker v-model="in_saleTime" placeholder="购票时间" style="width:150px"
                                  type="datetime">
                  </el-date-picker>
                </div>
              </template>
            </span>
      <span slot="footer" class="dialog-footer">
                <el-button class="botton" @click="centerDialogVisible = false">取 消</el-button>
                <el-button class="botton" @click="insertSale()">确 定</el-button>
            </span>
    </el-dialog>
    <div style="color: darkorange;font-size:small;height:30px">
      <el-input v-model="saleId" class="input" placeholder="订单编号" style="width:150px"></el-input>&nbsp;
      <el-input v-model="ticId" class="input" placeholder="车票编号" style="width:150px"></el-input>&nbsp;
      <el-input v-model="userId" class="input" placeholder="购票用户" style="width:150px"></el-input>&nbsp;
      <el-button class="botton" @click="loadSale()">搜索</el-button>
      <el-button class="botton" @click="centerDialogVisible = true">新增 <i class="el-icon-circle-plus"></i></el-button>
      <el-button class="botton" @click="mutipleDelete()">批量删除 <i class="el-icon-remove-outline"></i></el-button>
    </div>
    <div style="margin-top:8px;margin-bottom:15px;"></div>
    <div class="big">
      <el-table :data="tableData" :row-style="{ color: 'darkorange', height: '60px' }" border style="width: 100%"
                @selection-change="HandleSelectChange">
        <el-table-column type="selection">
        </el-table-column>
        <el-table-column label="订单编号" prop="saleId">
        </el-table-column>
        <el-table-column label="车票编号" prop="ticket.ticketId">
        </el-table-column>
        <el-table-column label="购票用户" prop="user.userId">
        </el-table-column>
        <el-table-column :formatter="formatDate" label="购票时间" prop="saleTime">
        </el-table-column>
        <el-table-column fixed="right" label="操作" style="border: 1px solid darkorange;" width="100px">
          <template slot-scope="scope">
            <div class="edit_delete">
              <el-button circle icon="el-icon-edit" type="warning" @click="editSale(scope.row)"></el-button>
              <el-button circle icon="el-icon-delete" type="danger"
                         @click="deleteSale(scope.row.saleId)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;text-align:center">
      <el-pagination :current-page="page" :total="total" background
                     class="white-list-tool" layout="total,prev, pager, next, jumper"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      saleId: '',
      ticId: '',
      userId: '',
      saleTime: '',
      in_saleId: '',
      in_ticId: '',
      in_userId: '',
      in_saleTime: '',
      centerDialogVisible: false,
      mutipleSelection: []
    }
  },
  methods: {
    HandleSelectChange(val) {
      this.mutipleSelection = val
    },
    async mutipleDelete() {
      var id = this.mutipleSelection.map(v => v.saleId)
      for (var i = 0; i < id.length; i++) {
        await this.$http.get("/deleteSale", {
          params: {
            saleId: id[i]
          }
        })
      }
      this.loadSale()
    },
    async insertSale() {
      await this.$http.get("/insertSale", {
        params: {
          saleId: this.in_saleId,
          ticketId: this.in_ticId,
          saleTime: this.in_saleTime,
          userId: this.in_userId,
        }
      })
      this.centerDialogVisible = false
      this.loadSale()
    },
    formatDate(row, column) {
      let data = row[column.property]
      if (data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    loadSale() {
      this.$http.get("/selectSale", {
        params: {
          saleId: this.saleId,
          ticketId: this.ticId,
          userId: this.userId,
          page: this.page,
        }
      }).then((response) => {
        this.tableData = response.data
      })
      this.$http.get("/getSaleRowCount", {
        params: {
          saleId: this.saleId,
          ticketId: this.ticId,
          userId: this.userId,
        }
      }).then((response) => {
        this.total = response.data
      })
    },
    handleCurrentChange(page) {
      this.page = page
      this.loadSale()
    },
    async deleteSale(id) {
      await this.$http.get("/deleteSale", {
        params: {
          saleId: id
        }
      })
      this.loadSale()
    },
    editSale(row) {
      this.in_saleId = row.saleId
      this.in_ticId = row.ticket.ticketId
      this.in_saleTime = row.saleTime
      this.in_userId = row.user.userId
      this.centerDialogVisible = true
    }
  },
  created() {
    this.loadSale()
  },
}
</script>

<style scoped>
::v-deep .el-dialog {
  height: 30%;
  background-color: #525151;
  border: 1px solid darkorange;
}

::v-deep .el-dialog__title {
  color: darkorange;
  caret-color: transparent;
}

.input3 /deep/ .el-input__inner {
  margin: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 150px;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 150px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;

}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>